<template>
    <div class="tree">
        <ul>
            <li v-for="(item, index) in treeData" :key="index">
                <div class="box" @click="handleItemClick(index)">
                    <div class="header" :class="{ 'active-item': activeIndex === index }">
                        {{ item.name }}
                    </div>
                    <img class="arrow"
                        :src="activeIndex === index ? require('@/assets/down.png') : require('@/assets/left.png')"
                        @click.stop="handleArrowClick(index)" />
                </div>
                <ul v-if="item.children && activeIndex === index" v-show="activeIndex === index">
                    <tree-node :activeCIndex="activeCIndex" :treeData="item.children"
                        @node-clicked="forwardNodeClick"></tree-node>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
import TreeNode from './TreeNode.vue';

export default {
    name: 'TreeN',
    components: { TreeNode },
    props: {
        treeData: {
            type: Array,
            required: true
        },
        activeFIndex: {
            type: Object,
            default: (() => { })
        }
    },
    data() {
        return {
            activeIndex: null,
            active: '',
            activeCIndex: null
        };
    },
    watch: {
        activeFIndex: {
            handler(newVal, oldVal) {
                this.activeIndex = newVal.activeChildIndex;
                this.activeCIndex = newVal.activeChildIndex
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        handleItemClick(index) {
            // 点击标题时处理展开/折叠和高亮
            if (event.target.classList.contains('header')) {
                this.activeIndex = this.activeIndex === index ? null : index;
                this.$emit('toggle', this.activeIndex);
            }
            this.forwardNodeClick(this.treeData[index].id, this.treeData[index].name); // 始终传递点击事件
        },
        handleArrowClick(index) {
            // 处理箭头点击，改变展开状态
            this.activeIndex = index === this.activeIndex ? null : index;
            this.$emit('toggle', this.activeIndex);
        },
        forwardNodeClick(clickedId) {
            console.log("clickedId, clickedName===>", clickedId);
            if (typeof clickedId !== 'number') {
                this.$emit('node-clicked', clickedId);
            }
        },
    },
    mounted() {
        // 初始化时，根据传入的activeFIndex设置高亮状态
        if (this.activeFIndex) {
            this.activeCIndex = this.activeFIndex.activeChildIndex;
            this.activeIndex = this.activeFIndex.activeIndex
        }
    }
};
</script>

<style scoped>
.box {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.header {
    font-weight: 700;
    font-size: 20px;
}

.tree ul {
    width: 150px;
    list-style-type: none;
    padding-left: 25px;

}

.tree li {
    cursor: pointer;
}

.arrow {
    margin-left: 10px;
    display: inline-block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>